<?php
//我是上传图片的模板
//上传代码分三部分。
//1：htmlUI代码，通过定义下面的变量，用于供给js操作。
//athlon的引用，一般是这样子
/*
<li class="layui-form-item icon">
   <label class="layui-form-label">小图：</label>
   <div class="layui-input-block">
        <? include("module/mod-icon-async-upload.php");?>
   </div>
</li>
*/
//2：js部分，用于控制UI显示和接口处理
//3：接口部分，为upload，负责上传和返回数据。
//4：css部分，用于定义UI样式。

//需要增加更多的上传地方在，只需要复制本文件，并且修改初始参数，即可。

$upload_button   = 'upload_button_icon';
$upload_img_view = 'upload_img_view_icon';
$upload_name     = 'upload_name_icon';
$upload_message  = 'upload_message_icon';
$upload_process  = 'upload_process_icon';
$remove_upload   = 'remove_upload_icon';
$input_name      = 'ai_icon';

$now_file_name   = $data['icon'];//当前已经上传了的文件名

?>






<div class="layui-upload">

    <div class="layui-upload-list">
        <?php if ($now_file_name != 'alpha.gif' && $now_file_name != '') {?>
            <img class="layui-upload-img" id="<?echo $upload_img_view?>" src="/uploadfiles/<? echo $now_file_name ?>">
        <?php }else{?>
            <img class="layui-upload-img" id="<?echo $upload_img_view?>" src="/controller/common/asset/image/no_image.jpg">
            <?;} ?>
    </div>


    <div class="upload-message-box">
        <p id="<?echo $upload_message?>"></p>
    </div>


    <div class="upload-process-box">
        <div class="layui-progress layui-progress-small" lay-showpercent="yes"
             lay-filter="<?echo $upload_process?>">
            <div class="layui-progress-bar" lay-percent=""></div>
        </div>
    </div>


    <button type="button" class="layui-btn layui-btn-xs" id="<?echo $remove_upload?>">清空图片</button>
    <button type="button" class="layui-btn layui-btn-xs" id="<?echo $upload_button?>">上传图片</button>

    <input type="hidden" id="<?echo $upload_name?>" name="<?echo $input_name?>" value="<? echo $now_file_name ?>">

</div>





<script>
    layui.use(['upload', 'element'], function(){
        var $ = layui.jquery,
            upload = layui.upload,
            element = layui.element;

        // 封装图片上传功能为函数
        function initImageUpload(options) {
            var defaults = {
                elem: '',              // 触发按钮ID
                viewElem: '',          // 图片预览元素ID
                nameElem: '',          // 隐藏域元素ID
                messageElem: '',       // 消息显示元素ID
                processFilter: '',     // 进度条过滤器
                removeElem: '',        // 清空按钮元素ID
                noImagePath: '/controller/common/asset/image/no_image.jpg', // 默认图片路径
                uploadUrl: '../controller/script/upload.php' // 上传接口地址
            };

            var config = $.extend({}, defaults, options);

            // 初始化上传组件
            var uploadInst = upload.render({
                elem: config.elem,
                url: config.uploadUrl,
                before: function(obj){
                    // 预读本地文件
                    obj.preview(function(index, file, result){
                        $(config.viewElem).attr('src', result);
                    });
                    // 重置进度条
                    element.progress(config.processFilter, '0%');
                },
                done: function(res){
                    // 上传完毕回调
                    if(res.code === 0){
                        // 上传成功
                        $('#' + config.messageElem).html('<span style="color: #009688;">上传成功</span>');
                        // 保存图片名称到隐藏域
                        $(config.nameElem).val(res.data.name);
                        // 设置进度条为100%
                        element.progress(config.processFilter, '100%');
                    } else {
                        // 上传失败
                        $('#' + config.messageElem).html('<span style="color: #FF5722;">'+res.msg+'</span>');
                        element.progress(config.processFilter, '0%');
                    }
                },
                error: function(){
                    // 上传失败处理
                    var messageBox = $('#' + config.messageElem);
                    messageBox.html('<span style="color: #FF5722;">上传失败</span> <a class="layui-btn layui-btn-xs upload_reload_button">重试</a>');
                    messageBox.find('.upload_reload_button').on('click', function(){
                        uploadInst.upload();
                    });
                    // 重置进度条
                    element.progress(config.processFilter, '0%');
                },
                progress: function(n, elem, res, index) {
                    // 更新进度条
                    element.progress(config.processFilter, n + '%');
                    // 显示进度数字
                    $('#' + config.messageElem).html('<span>上传进度：' + n + '%</span>');
                }
            });

            // 绑定清空图片事件
            if (config.removeElem) {
                $(config.removeElem).click(function() {
                    $(config.viewElem).attr('src', config.noImagePath);
                    $(config.nameElem).val('alpha.gif');
                });
            }

            return uploadInst;
        }



        // 初始化ICON上传功能
        initImageUpload({
            elem: '#<?echo $upload_button?>',
            viewElem: '#<?echo $upload_img_view?>',
            nameElem: '#<?echo $upload_name?>',
            messageElem: '<?echo $upload_message?>',
            processFilter: '<?echo $upload_process?>',
            removeElem: '#<?echo $remove_upload?>'
        });
    });
</script>
